Vue.component('mytable1', {
    template: `
        <div>
            <div class="box border" style="padding:10px 20px 5px 20px;">
                <top-form1 
                    :searchbox="table.searchBox" 
                    :defaultpramas="defaultPramas" 
                    :isedit="isedit"
                ></top-form1>
            </div>
            <div class="box border m_top10 orderlist">
                <template>
                    <u-table 
                        ref="tabletable" 
                        :height="height" 
                        tooltip-effect="dark" 
                        border 
                        stripe 
                        highlight-current-row 
                        highlight-selection-row 
                        size="mini" 
                        style="width: 100%" 
                        :row-class-name="tableRowClassName" 
                        element-loading-text="加载中..."
                        use-virtual
                        showBodyOverflow="title"
                        showHeaderOverflow="title"
                        :big-data-checkbox="checked"
                        row-key="idx"
                        :row-height="rowHeight"
                    >
                        <template slot="empty">
                            <div class="table-empty">没有查询到符合条件的记录</div>
                       </template>

                        <!-- selectable function 判断是否可以被勾选 -->
                        <u-table-column type="selection" width="40" :selectable="selectable"/>

                        <u-table-column 
                            :key="indexT"
                            v-for="item,indexT in table.tableRole" 
                            :width="item.width" 
                            :fixed="item.fixed" 
                            :label="item.title" 
                            show-overflow-tooltip 
                        >
                            <template slot-scope="scope">
                                <div v-for="(item2,index) in scope.row" v-if="index == item.field" >
                                    <div v-if="(scope.row.show && !item.noedit) || scope.row[item.field+'editgo']" >
                                        <!-- 文本框 -->
                                        <el-input v-if="item.type == 'text'" v-model="scope.row[index]" size="mini">
                                        </el-input>
                                        <!-- 数字框 -->
                                        <el-input v-if="item.type == 'number'"  v-model="scope.row[index]" size="mini" type="number">
                                        </el-input>
                                        <!-- 日期 -->
                                        <el-date-picker 
                                            v-if="item.type == 'date'" 
                                            v-model="scope.row[index]" 
                                            v-show="scope.row.show" 
                                            size="mini" 
                                            :value-format="item.format ? item.format : 'yyyy-MM-dd'" 
                                            :format="item.format ? item.format : 'yyyy-MM-dd'" 
                                        >
                                        </el-date-picker>
                                        <!-- 日期时间 -->
                                        <el-date-picker 
                                            v-if="item.type == 'datetime'" 
                                            type="datetime" 
                                            v-model="scope.row[index]" 
                                            size="mini"
                                            :value-format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'" 
                                            :format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'" 
                                        >
                                        </el-date-picker>
                                        <!-- 固定选择 -->
                                        <el-select filterable v-if="item.type == 'select'" size="mini" v-model="scope.row[index]">
                                            <el-option v-for="item3 in item.option" :key="item3.value" :label="item3.label" :value="item3.value">
                                            </el-option>
                                        </el-select>

                                        <!-- api选择 -->
                                        <td-api-select1 v-if="item.type == 'select_api'" :role="item" :scoperow="scope.row" :scrolling="scrolling"> </td-api-select1>
                                        <!-- 地区选择 -->
                                        <td-area v-if="item.type == 'area'" :role="item" :scoperow="scope.row" :scrolling="scrolling"> </td-area>

                                    </div>
                                    <div  @click="canFieldEdit(item,scope.row)"  v-else>
                                        <!-- 固定选择/ 匹配显示 -->
                                        <span v-if="item.type == 'select' || item.type == 'select_api'">
                                            <span :key="i" v-for=" item,i in item.option" v-if="item.value == scope.row[index]">{{item.label}}</span>
                                        </span>
                                        <!-- 普通显示 -->
                                        <span v-else>{{scope.row[index]}}</span>
                                    </div>
                                </div>
                            </template>
                        </u-table-column>
                    </u-table>

                    <el-row>
                        <el-col :span="16">
                            <el-pagination :disabled="isedit" @size-change="tableSizeChange" @current-change="tableHandleCurrentChange" :current-page="page" :page-sizes="[10,30, 50, 70, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>
                        </el-col>
                        <el-col :span="8">
                            <div class="dis-flex flex-x-end">
                                <!-- <el-button type="warning" @click="getCurrentRow" plain size="mini">警告按钮</el-button> -->
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </div>
        </div>
        
    `,
    props: {
        table:{
            type: Object,
            default: () => { return {} }
        },
        height:{
            type: Number,
            default:800,
        },
        isedit:{
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            defaultPramas:{},
            tableData:[],
            //
            searchBoxCacheData:{},
            //表格空值文字
            tableEmptyText:'暂无数据',
            page: 1,
            total: 0,
            pageSize: 10,
            //
            scrolling:false,
            //
            update:false,
            //umy
            checked: true,
            rowHeight: 36,
        };
    },

    created() {
        let _this = this;
        //获取调度车数据
        this.tablesearch();
        //获取调度车select选项
        _this.apiInitGetSelectApi(_this.table);

    },
    mounted() {
        let _this = this;
        /*this.$nextTick(function(){
            //获取节点
            this.tableDistance = this.$refs.tabletable.bodyWrapper ;
            //写入监听事件
            this.tableDistance.addEventListener('scroll', () => {
                this.scrolling = true;
                setTimeout(function() {
                    _this.scrolling = false;
                }, 500);
            })
        })*/
    },

    methods: {

        //调度车--------------------------------------------------------------------------->
        /*tablesearch() {
            var _this = this;
            var page = this.page ;

            var pdata = {
                pagesize: this.pageSize,
                page: page
            };

            //检索数据
            var cache = this.searchBoxCacheData;

            if(  Object.keys(cache).length > 0 ){
                pdata = Object.assign(pdata, cache);
            }

            console.log(pdata,'pdata');

            $.get("/index.php?s=/store/wlyunshu.api/getdiaoduche", pdata , function(resalt) {
                var data = resalt.data.list.data;
                if (data) {
                    data.forEach(function(item, index) {
                        item.show = false ;
                    })
                }
                _this.tableData = data;
                _this.total = resalt.data.list.page.total ;

                _this.tableEmptyText = '暂无数据';
            });
        },*/
        tablesearch() {
            var _this = this;
            var page = this.page ;

            var params = {
                action:this.table.searchPath,
                pagesize: this.pageSize,
                page: page
            };

            //检索数据
            var cache = clone(this.searchBoxCacheData);

            if(  Object.keys(cache).length > 0 ){

                let extra_where = [];

                Object.entries(cache).forEach(function([key, value]) {
                    extra_where.push([key,'=',value]);
                });
                params.extra_where = extra_where;
            }

            request(params, function(resalt) {
                var data = resalt.data.list.data;
                if (data) {
                    data.forEach(function(item, index) {
                        item.show = false ;
                    })
                }
                _this.tableData = data;
                _this.total = resalt.data.list.page.total ;
                _this.$refs.tabletable.reloadData(_this.tableData)

                _this.tableEmptyText = '暂无数据';
            });
        },
        //修改分页条数
        tableSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            //
            this.tableEmptyText = '数据加载中...';
            this.tableData = [];
            //
            this.tablesearch();
        },
        //点击分页
        tableHandleCurrentChange(val) {
            this.page = val;
            //
            this.tableEmptyText = '数据加载中...';
            this.tableData = [];
            //
            this.tablesearch();
        },

        //获取调度车选中行
        getCurrentRow() {
            let currentRow = this.$refs.tabletable.selection;
        },



        //辅助
        //api select ----------------------------------------------------------------------->
        //初始化 api_selct 所用数据
        apiInitGetSelectApi(obj) {
            let _this = this;
            //筛选
            if(obj.searchBox){
                obj.searchBox.forEach(function(item,index){
                    if((item.type == 'select_api' || item.type == 'area') && !item.parentField ){

                        _this.apiGetSelect(item);
                    }
                })
            }
            //表格
            obj.tableRole.forEach(function(item,index){
                if((item.type == 'select_api' || item.type == 'area') && !item.parentField ){
                    _this.apiGetSelect(item);
                }
            })
        },
        //普通api预加载数据
        apiGetSelect(item) {
            let _this = this;
            if (item.constructor === Object && item.action && item.option.length == 0) {

                let params = {
                    action:item.action,
                    pagesize: 999999,
                    page: 1
                };

                //是否限制数据长度
                if(item.maxNum){
                    params.pagesize = item.maxNum;
                }

                params.extra_where = [];

                //特别全局筛选条件
                if( item.hasOwnProperty('default_prama')){

                    let arr = item.default_prama;
                    arr.forEach(function(item2){
                        if(item2.length == 2){
                            params.extra_where.push([
                                item2[0],
                                _this.defaultPramas[item2[1]]
                            ]) ;
                        }else if(item2.length == 3){
                            params.extra_where.push([
                                item2[0],
                                item2[1],
                                _this.defaultPramas[item2[2]]
                            ]) ;
                        }

                    })
                }
                //特别指定筛选条件
                if( item.hasOwnProperty('extra_prama') && item.extra_prama.length > 0){
                    params.extra_where = params.extra_where.concat(item.extra_prama);
                }

                //指定 value label
                let valueField = '';
                let labelField = '';
                if(item.hasOwnProperty('optionTableRole') ){
                    item.optionTableRole.forEach(function(obj){
                        if(obj.stype){
                            if(obj.stype == 'value'){
                                valueField = obj.field;
                            }else if(obj.stype == 'label'){
                                labelField = obj.field;
                            }
                        }
                    })
                }
                if(valueField != '' && labelField != ''){
                    params.show_value_field = valueField;
                    params.show_value_label = labelField;
                }

                request(params, function(resalt) {
                    var data = resalt.data.list.data;
                    if (data) {
                        item.option = data;
                    }
                });
            }
        },

        //表格单行背景
        tableRowClassName({ row, rowIndex }) {
            if (row.groupid > 0) {
                return 'warning-row';
            } else if (row.show == true) {
                return 'select-row';
            }
            return '';
        },
        //其他
        //是否可选中
        canFieldEdit(obj,row){
            if(this.isedit){
                console.log(this.isedit);
                this.$set(row,obj.field+'editgo',true);
                //this.update=!this.update;
            }
        },

        //通信 全局检索参数
        setsearchboxcachedata(obj){
            console.log(obj,'obj');
            this.searchBoxCacheData = obj
        },
        //新增数据
        addRow(){
            let role = this.table.tableRole  ;
            let data = {};
            role.forEach(function(item){
                if(item.defautvalue){
                    data[item.field] = item.defautvalue;
                }else{
                    data[item.field] = '';
                }
            })
            data.show = true;

            let olddata = this.tableData;
            olddata.unshift(data) ;

            this.$set(olddata,'tableData',olddata);

            //this.tableData.unshift(data) ;
        },
        //保存数据
        saveRow(){
            let data = this.tableData  ;

            let savedata = {} ;

            data.forEach(function(item){
                if(item.idx == 0){
                    savedata = item;
                }
            });

            savedata.action = this.table.insertPath ;

            saverequest({params:savedata}, function(resalt) {
                console.log(resalt) ;
            });

        },
        //umy
        selectable (row, index) {
            if (index === 1) {
                return false
            } else {
                return true
            }
        },

    }
})

Vue.directive('blur', function (el) {
    el.querySelector('input').blur()
})
